<!--
*@Author: QWP
*@Description: 综合预警
*@Date: 2024-07-18 14:05:35
-->
<template>
  <div style="width: 100%;  height: 120px; border-radius: 16px"
    :style="{ background: state.color.levelCardBgColor }">
    <a-row class="f-h-100 u-warning-level-card" >
      <a-image :src="wrningImg" :preview="false"
        width="80px">
      </a-image>
      <div style="position: absolute;
        top: 50%;
        width: 100%;
        text-align: center;
        transform: translateY(-50%);
        font-family: PingFang SC Medium, PingFang SC Medium;
        font-weight: 400;
        font-size: 36px;
        color: #FFFFFF;">
        {{ levelLabel[level] }}级应急响应
      </div>
    </a-row>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch, onMounted, h, DefineProps } from 'vue' 
import { useEmergencyStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import { getColor, levMainColor } from '@/views/index/emergencyIndex/data'
import { urlFile } from '@/util/common'
interface Props {
  level?: string
}
const props = defineProps<Props>()

const { level } = storeToRefs(useEmergencyStore())
const wrningImg = computed(() => urlFile(`warningIndex/warning${level.value}.png`))
const levelLabel = {
  '1': 'Ⅰ', '2': 'Ⅱ', '3': 'Ⅲ', '4': 'Ⅳ'
}

const state = reactive({
  color: {}
})
watch(() => level.value, (nval, oval) => {
  if(!props.level) {
    state.color = getColor(nval)
  }
}, { immediate: true }) 
onMounted(() => {
  if(props.level) {
    state.color = getColor(props.level)
  }
})
</script>

<style lang='scss'>
.u-warning-level-card {
  position: relative;
  .ant-image {
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    justify-content: center;
  }
}
</style>